@import "../../common/variables.scss";

$searchWidth: 22px;
$searchHeight: 22px;
$barLeft: 50px;
// global

.inputWrap {
  width: 550px;
  height: 44px;
  padding-left: $barLeft;
  box-sizing: border-box;
  border-radius: 137.63px;
  background: $mainBg;
  line-height: 28px;
  cursor: pointer;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-family: sans-serif;
  text-align: left;

  &:before {
    content:"";
    display:block;
    position:absolute;
    top: 50%;
    left: 18px;
    vertical-align: middle;
  }

}

.search {
  &:before {
    width: $searchWidth;
    height: $searchHeight;
    margin-top: -($searchHeight/2);
    background: no-repeat center url("assets/images/magnify.png");
  }

  input {
    position:absolute;
    // left: 50px right: 20px
    width: calc(100% - 50px - 20px);
    padding: 12px 18px 12px 0;
    line-height: 20px;
    border: none;
    font-size: $fontSize;
    color: $fontColor;
    background: transparent;

    &:focus {
      outline: none;
    }
  }
}
